<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Component <%= componentName %></title>

  <link rel="stylesheet" href="../../../css/fabric.css">
  <link rel="stylesheet" href="<%= componentName %>.css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 
  <script type="text/javascript">
    $(document).ready(function() {
      // File Picker demo fixes
      if ($('.ms-FilePicker').length > 0) {
        $('.ms-FilePicker').css({
          "position": "absolute !important"
        });

        $('.ms-Panel').FilePicker();
      } else {
        if ($.fn.<%= componentName %>) {
          $('.ms-<%= componentName %>').<%= componentName %>();
        }
      }

       // Vanilla JS Components
      if (typeof fabric !== "undefined") {
        if ('<%= componentName %>' in fabric) {
          var elements = document.querySelectorAll('.ms-<%= componentName %>');
          var i = elements.length;
          var component;
          while(i--) {
            component = new fabric['<%= componentName %>'](elements[i]);
          }
        }
      }

    });
  </script>
  
  <%= jsLinks %>

  <!-- Styles specifically for this page, not required for proper display on components  -->
  <style type="text/css">
    html, 
    body {
        margin: 0;
        padding: 0;
    }    

    h1 {
        margin: 0;
        padding: 10px;
        margin-bottom: 20px;
        padding-left: 25px;
    }

    #componentWrapper {
      width: calc(100% - 56px);
      height: 100%;
      padding: 0 28px;
    }

    .sample-wrapper {
      margin: 28px 0;
    }

    .sample-wrapper .ms-OrgChart {
      float: left;
      margin-right: 30px;
    }

    .sample-wrapper > .ms-Overlay {
      display: block;
      position: relative;
      height: 300px;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.3); // For visibility of lighter variant
    }

    .ms-ContextualMenu.is-open  {
      position: relative;
      margin-bottom: 10px;
    }

    .ms-NavBar-item .ms-ContextualMenu {
      position: absolute;
    }

    .ms-CommandBar .ms-ContextualMenu {
      position: absolute;
    }
  </style>
</head>

<body>
  <h1 class="ms-font-su ms-fontColor-white ms-bgColor-themeDarker"><%= componentName %></h1>
  <div id="componentWrapper">
    <%= contents %>
  </div>
</body>
</html>
